<template>
  <div>
    <!-- <h3>form组件</h3> -->
    <el-dialog
      :title="status.isAdd ? '商品规格添加' : '商品规格编辑'"
      :visible.sync="status.isshow"
      @closed="closed"
    >
      <el-form :model="form">
        {{ form }}
        <div>{{ arr }}</div>
        <el-form-item label="规格名称" label-width="120px">
          <el-input v-model="form.specsname" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          label="规格属性"
          label-width="120px"
          v-for="(item, index) in arr"
          :key="index"
        >
          <div class="line">
            <el-input v-model="item.value" autocomplete="off"></el-input>
            <!-- 点击新增，给arr添加一条数据 -->
            <el-button
              type="primary"
              v-if="index == 0"
              @click="arr.push({ value: '' })"
              >新增规格属性</el-button
            >
            <!-- 点击删除。删除arr一条数据 -->
            <el-button type="danger" v-else @click="arr.splice(index, 1)"
              >删除</el-button
            >
          </div>
        </el-form-item>

        <el-form-item label="状态" label-width="120px">
          <el-switch
            v-model="form.status"
            :active-value="1"
            :inactive-value="2"
          ></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isshow = status.isshow = false">取 消</el-button>
        <el-button type="primary" v-if="status.isAdd" @click="add"
          >添 加</el-button
        >
        <el-button type="primary" @click="update" v-else>修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { reqspecsadd, reqspecsedit, reqspecsinfo } from "../../../http/api";
import { successAlert } from "../../../utils/alert";
import { mapGetters, mapActions } from "vuex";
export default {
  props: ["status"],
  data() {
    return {
      // 添加接口初始化数据
      form: {
        specsname: "",
        attrs: "",
        status: 1,
      },
      arr: [
        {
          value: "",
        },
      ],
    };
  },
  methods: {
    ...mapActions({
      reqList: "specs/reqList",
    }),
    empty() {
      this.form = {
        specsname: "",
        attrs: "",
        status: 1,
      };
      this.arr=[
        {
          value: "",
        },
      ]
    },
    add() {
      this.form.attrs=this.arr.map(item=>item.value).join(',')
      console.log(this.form);
      reqspecsadd(this.form).then((res) => {
        if (res.data.code == 200) {
          // 弹成功
          successAlert(res.data.msg);
          // 清空
          this.empty();
          //  弹框消失
          this.status.isshow = false;
          // 列表重新渲染
          this.reqList();
        }
      });
    },

    // 点击编辑之后
    getOne(id) {
      reqspecsinfo({
        id: id,
      }).then((res) => {
        if (res.data.code == 200) {
          console.log(res.data.list[0].attrs);
          this.form=res.data.list[0]
          this.arr=res.data.list[0].attrs.map(item=>{
            return {value:item}
          })
          // 补一个id删除时要用
          this.form.id = id;
        }
      });
    },
    // 点击修改
    update() {
      this.form.attrs=this.arr.map(item=>item.value).join(',')
      reqspecsedit(this.form).then((res) => {
        if (res.data.code == 200) {
          successAlert(res.data.msg);
          this.empty();
          this.status.isshow = false;
          this.reqList();
        }
      });
    },
    // 关闭弹框事件
    closed() {
      if (!this.status.isAdd) {
        this.empty();
      }
    },
  },
  mounted() {},
  computed: {
    ...mapGetters({
      list: "specs/list",
    }),
  },
};
</script>

<style scoped lang="less">
@import "../../../less/index.less";
.line {
  display: flex;
}
</style>